import $ from 'jquery';

export function createTableDesigner(h, children) {
  return h('div', {
    class: ['design-table-designer', 'design-table-designable']
  }, children);
}

export function createTable(h, ctx, chidlren) {
  return h('div', {
    ...ctx,
    class: ['design-table'],
  }, chidlren);
}

export function createDefaultTableValue(row = 5, col = 5) {
  let trs = [];
  for (let i = 0; i < row; i++) {
    let tds = [];
    for (let j = 0; j < col; j++) {
      tds.push(createTd(j));
    }
    trs.push(`<tr style="height: 40px" data-row="${i}">`, tds.join(''), '</tr>');
  }
  let cols = [];
  for (let i = 0; i < col; i++) {
    cols.push('<col/>');
  }
  let colGroup = ['<colgroup>', cols.join(''), '</colgroup>'];
  let res = ['<table>', colGroup.join(''), trs.join(''), '</table>'];
  return res.join('');
}

export function createDefaultDesignTable(row = 5, col = 5) {
  let res = createDefaultTableValue(row, col);
  let div = `<div class="design-table">
        <div class="design-table-body">${res}</div>
      </div>`
  return $(div)[0];
}

export function createTd(col) {
  return `<td data-col="${col}" class="content" data-role="content"><div class="col-bar"></div><div class="row-bar"></div></td>`;
}

export function getPosition(td) {
  return {
    row: td.parentNode.getAttribute('data-row'),
    col: td.getAttribute('data-col')
  };
}

export function getPositionNumber(td) {
  return {
    row: parseInt(td.parentNode.getAttribute('data-row')),
    col: parseInt(td.getAttribute('data-col'))
  };
}

export function getTargetForTd(el) {
  while (el && el.tagName && el.tagName.toLowerCase() !== 'td')
    el = el.parentNode;
  if (el && !el.tagName)
    return null;
  return el;
}

export function getTdRow(td) {
  return parseInt(td.parentNode.getAttribute('data-row'));
}

export function getTdCol(td) {
  return parseInt(td.getAttribute('data-col'));
}

export function stop(e) {
  e.stopPropagation && e.stopPropagation();
  e.preventDefault && e.preventDefault();
}

export function hideTd(td) {
  td.style.display = 'none';
  $(td).find('.content-wrapper').html('');
}

export function showTd(td) {
  td.style.removeProperty('display');
}

export function initSpan(td) {
  td.removeAttribute('rowspan');
  td.removeAttribute('colspan');
}

export function isHideTd(td) {
  return td.style.display === 'none';
}

export function createRowResizePlaceholder(container) {
  let div = document.createElement('div');
  div.className = 'row-resize-placeholder';
  let rect = container.getBoundingClientRect();
  div.style.width = `${rect.width}px`;
  div.style.left = `${rect.x}px`;
  let title = document.createElement('div');
  title.className = 'title';
  div.append(title);
  document.body.append(div);
  return div;
}

export function getTdHeight(td) {
  return td.parentNode.offsetHeight;
}

export function createColResizePlaceholder(container) {
  let div = document.createElement('div');
  div.className = 'col-resize-placeholder';
  let rect = container.getBoundingClientRect();
  div.style.height = `${rect.height}px`;
  div.style.top = `${rect.y}px`;
  let title = document.createElement('div');
  title.className = 'title';
  div.append(title);
  document.body.append(div);
  return div;
}

export function createTr(col) {
  let tr = document.createElement('tr'), tds = [];
  $(tr).css('height', '40px');
  for (let i = 0; i < col; i++) {
    $(tr).append($(createTd(i)));
  }
  return tr
}

export function setTdHeight(td, height) {
  td.parentNode.style.height = `${height}px`;
}

export function setTdWidth(td, width) {
  td.parentNode.style.width = `${width}px`;
}

export function isIgnoreMousedownForDesignTable(el) {
  while (el && !$(el).hasClass('ignore-event-for-design-table')) el = el.parentNode;
  return !!el
}

export function showTdBorder(key, td) {
  $(td).css(key, '1px solid #A8ABB2')
}

export function hideTdBorder(key, td) {
  $(td).css(key, '')
}

export function createTdPlaceholder(placeholderText) {
  let div = document.createElement('div');
  $(div).html(placeholderText).addClass('cell-placeholder')
  return div;
}

export function copyInsertRowProperties(tr, newTr) {
  let ps = ['data-sub-table-role', 'data-placeholder']
  ps.forEach(p => {
    $(newTr).attr(p, $(tr).attr(p));

    let tds = $(tr).find('td'), tds1 = $(newTr).find('td');
    for (let i = 0; i < tds.length; i++) {
      ps.forEach(p1 => {
        $(tds1[i]).attr(p1, $(tds[i]).attr(p1));
      })
    }
  })
}

export function createResizeMask(clazz) {
  let div = document.createElement('div');
  $(div).addClass('resize-mask');
  $(div).addClass(clazz);
  $(div).prependTo(document.body)
}

export function removeResizeMask() {
  $('.resize-mask').remove();
}